<dd>
    <div class="form-tt"><if condition="$type eq '_now'">现居地：</if>
        <if condition="$type eq '_home'">家乡：</if></div>
    <div class="form-row">
        <div style="padding:3px 0 0 0;*height:30px;overflow:hidden;*zoom:1;float:left">
            <span id="show_province{$type}" style="line-height:24px;font-size: 14px">{$proname}</span>
            <span id="show_city{$type}" style="line-height:24px;font-size: 14px">{$cityname}</span>
            <span id="show_area{$type}" style="line-height:24px;font-size: 14px">{$areaname}</span>


            <a id="btn_area{$type}" href="javascript:;"
               style="line-height:24px;font-size: 14px;margin-right: 10px"
               onclick="">选择</a>

            <input type="hidden" name="old_province{$type}" event-node="province{$type}" event-args="error=必须选择"
                   id="old_province_id{$type}" value="{$curPro}"/>
            <input type="hidden" name="old_city{$type}" event-node="city{$type}" event-args="error=必须选择"
                   id="old_city_id{$type}" value="{$curCity}"/>
            <input type="hidden" name="old_area{$type}" event-node="area{$type}" event-args="error=必须选择"
                   id="old_area_id{$type}" value="{$curArea}"/>


            <input type="hidden" name="province{$type}" event-node="province{$type}" event-args="error=必须选择"
                   id="province_id{$type}" value="0"/>
            <input type="hidden" name="city{$type}" event-node="city{$type}" event-args="error=必须选择"
                   id="city_id{$type}" value="0"/>
            <input type="hidden" name="area{$type}" event-node="area{$type}" event-args="error=必须选择"
                   id="area_id{$type}" value="0"/>
            <div id="area_box{$type}" style="display: none;">
                <div style="width:610px;padding: 20px;">
                    <div class="mb10" style="clear:right;">
                        <ul id="myarea{$type}">
                            <volist name="area" id="vo">
                                <li><a style="font-size: 12px" href="javascript:;"
                                       onclick="load_city('{$vo.area_id}','{$vo.title}','{$type}')">{$vo.title}</a>
                                </li>
                            </volist>
                        </ul>
                        <div style="clear:both"></div>
                    </div>
                    <div class="clearfix"
                            ></div>
                    <div style="clear: left">
                        <ul id="city{$type}"></ul>
                    </div>
                    <div style="clear: left">
                        <ul id="area{$type}"></ul>
                    </div>
                </div>
                <div class="clearfix">
                </div>
            </div>


        </div>
    </div>
</dd>

<script>
    $('#btn_area_now').click(function () {
        mybox = ui.box.show($('#area_box_now').html(), '选择地区', function () {
        });
        $('.boxy-modal-blackout').css({position: 'fixed'});
    });
    $('#btn_area_home').click(function () {
        mybox = ui.box.show($('#area_box_home').html(), '选择地区', function () {
        });
        $('.boxy-modal-blackout').css({position: 'fixed'});
    });
    function load_city(pid,procince,type) {
        $('#city'+type).load("{:U('friend/Info/_city')}", {'pid': pid,'type':type});
        $('#show_province'+type).text(procince);
        $('#province_id'+type).val(pid);
        $('#area'+type).load('  ');
    }
    function load_area(pid,city,type) {
        $('#area'+type).load("{:U('friend/Info/_area')}", {'pid': pid,'type':type});
        $('#city_id'+type).val(pid);
        $('#show_city'+type).text(city);
    }
    function set_area(sid, sname,type) {
        ui.box.close();
        $('#area_id'+type).val(sid);
        $('#show_area'+type).text(sname);
    }
</script>


<style>
    #myarea_now,#myarea_home{
        list-style: none;
        overflow: hidden;
        zoom: 1;
        border: 1px solid #C3C3C3;
        background: white;
        font-size: 12px;
        padding: 10px 0 10px 10px;
    }

     #myarea_now li, #myarea_home li {
        float: left;
        font-size: 12px;
        width: 42px;
        text-align: left;
        margin-bottom: 5px;
    }

    #myarea_now a, #myarea_home a {
        font-size: 12px;
    }

    #myarea_now a:hover, #myarea_home a:hover {
        font-size: 12px;
    }

    #city_now, #city_home{
        overflow-x: hidden;
        overflow-y: auto;
        height: 50px;
        border: 1px solid #C3C3C3;
        background: white;
        padding: 10px 0 10px 10px;
    }

    #city_now li, #city_home li {
        outline: medium none;
        margin-bottom: 10px;
        float: left;
        margin-right: 10px;
        width: 50px;
    }

    #area_now, #area_home {
        overflow-x: hidden;
        overflow-y: auto;
        height: 50px;
        border: 1px solid #C3C3C3;
        background: white;
        padding: 10px 0 10px 10px;
    }

    #area_now li, #area_home li {
        outline: medium none;
        margin-bottom: 10px;
        float: left;
        margin-right: 10px;
        width: 50px;
    }
</style>